<template>
  <div class="carousel-wrapper">
    <div class="content">
      <div class="operation">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="首页轮播图" name="first" />
          <el-tab-pane label="设计师轮播图" name="second" />
          <el-tab-pane label="品牌轮播图" name="third" />
        </el-tabs>
      </div>
      <div class="top">
        <div class="title-wrapper">
          <div class="title">
            <p>轮播图</p>
            <p v-if="activeName == 'first'">建议尺寸：750*520px</p>
            <p v-else>建议尺寸：750*350px</p>
          </div>
        </div>
        <el-button @click="add">添加</el-button>
      </div>
    </div>
    <div class="table">
      <base-table
        :list="list"
        @success="hanldeSuccess"
        @sort="handleSort"
        @link="handleLink"
        @image="handleImage"
      />
    </div>
  </div>
</template>
<script>
import BaseTable from '@/views/carousel/base-table'
import { getCarouselList, addCarouselItem, editCarouselItem } from '@/api/http/carousel'
const ERR_OK = 200
export default {
  components: {
    BaseTable
  },
  data() {
    return {
      activeName: 'first',
      list: [],
      type: 1
    }
  },
  created() {
    this._getCarouselList(1)
  },
  methods: {
    handleImage(image, row) {
      this._editCarouselItem({ type: this.type, image, id: row.id })
    },
    handleSort(row) {
      this._editCarouselItem({ type: this.type, sort: row.sort, id: row.id })
    },
    handleLink(row) {
      this._editCarouselItem({ type: this.type, link: row.link, id: row.id })
    },
    hanldeSuccess() {
      this.handleTabClick()
    },
    handleTabClick() {
      switch (this.activeName) {
        case 'first':
          this.type = 1
          this._getCarouselList(1)
          break
        case 'second':
          this.type = 2
          this._getCarouselList(2)
          break
        case 'third':
          this.type = 3
          this._getCarouselList(3)
          break
      }
    },
    add() {
      this._addCarouselItem({ type: this.type, link: '', sort: 0, image: '' }).then(res => {
        if (res.code === ERR_OK) {
          this.list.push({
            sort: '',
            image: '',
            link: '',
            id: res.data.id
          })
        }
      })
    },
    _getCarouselList(type) {
      getCarouselList(type)
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _addCarouselItem({ type, link, sort, image, id }) {
      return addCarouselItem({ type, link, sort, image, id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '添加成功~',
              type: 'success',
              showClose: true
            })
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _editCarouselItem({ id, sort, link, image, type }) {
      editCarouselItem({ id, sort, link, image, type })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.$message({
              message: '修改成功~',
              type: 'success',
              showClose: true
            })
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-tab.scss";
@import "@/styles/el-button.scss";
.carousel-wrapper {
  .content {
    .top {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      .title-wrapper {
        display: flex;
        align-content: center;
        .title {
          height: 44px;
          display: flex;
          align-items: center;
          p {
            font-size: 18px;
            font-family: Roboto;
            line-height: 44px;
            color: rgba(68, 68, 68, 1);
            cursor: pointer;
            margin-right: 10px;
            &:nth-child(1) {
              font-weight: bold;
            }
            &:nth-child(2) {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
